<template>
  <div
    style="
      background-color: #e5273b;
      padding-bottom: 0.8rem;
      position: relative;
    "
  >
    <div class="exchange" ref="exchange">
      <div class="Mobile_points">
        <img style="width: 100%" src="../assets/banner.6ceb17c2.png" />
        <div class="text">
          我的移动积分: {{ userInfo.userHeCanuseIntegral }}
        </div>
      </div>
      <div class="Voucher_package">
        <div class="title">
          <div class="line"></div>
          <div>{{ matchingInfo.wareName }}</div>
          <div class="line"></div>
        </div>
        <p class="illustrate">本商品可在{{ brand }}积分商城使用</p>
        <div class="packageContent">
          <div class="package">
            {{ userInfo.benefitPackage }}
          </div>
          <div class="money">
            <span>￥</span>
            <span>{{ hongbao }}</span>
          </div>
        </div>
        <div class="jifen">兑换将消耗{{ consume }}移动积分</div>
      </div>
      <van-form>
        <!-- 验证码 -->
        <van-field
          v-model="code"
          type="number"
          maxlength="6"
          placeholder="请输入验证码"
          class="codeIcon"
          @blur="iphonCode"
        >
          <div slot="left-icon" style="width: 0.5rem">
            <img src="../assets/code.gif" />
          </div>
          <van-button
            v-if="!isSendCode"
            slot="button"
            type="warning"
            size="small"
            style="width: 2.5rem; display: flex; justify-content: center"
            round
            @click.stop="getCode"
          >
            获取验证码
          </van-button>
          <van-button
            slot="button"
            type="warning"
            size="small"
            style="width: 2.5rem; display: flex; justify-content: center"
            round
            v-else
          >
            {{ codeNum }}s后重试
          </van-button>
        </van-field>
      </van-form>

      <div class="exchange_btn" @click="nowSubmit">
        <!-- <img src="../assets/form_submit.f2aed870.png" alt="" /> -->
        <div v-if="loading" class="load">
          <van-loading type="spinner" color="#1989fa" />
        </div>
      </div>
      <div class="service">专属客户经理: 4008256216</div>
    </div>
    <div class="activity">
      <div>
        <div class="title">
          <div class="line"></div>
          <div>活动流程</div>
          <div class="line"></div>
        </div>
        <p class="content">
          {{ matchingInfo.importantNotice }}
        </p>
      </div>
    </div>
    <div class="contactService" @click="kefu">
      <img src="../assets/service_btn.bbf26eb1.png" alt="" />
    </div>
    <!-- 客服弹框 -->
    <van-popup v-model="kefuShow">
      <div class="kefu">4008256216</div>
    </van-popup>
  </div>
</template>

<script>
import {
  queryPoints,
  matchingProducts,
  payCode,
  shunfengOrder,
  feizhuOrder,
  payJFOrder,
} from "../api/main";
export default {
  name: "exchange",
  components: {
    // feizhu
  },
  data() {
    return {
      phone: "",
      code: "",
      codeNum: "60",
      isSendCode: false,
      dfpinfo: localStorage.getItem("dfpinfo"),
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      userInfo: {}, //用户积分信息
      // sku: "",
      matchingInfo: {}, //商品信息
      hongbao: 0,
      brand: "FZ",
      orderid: "", //订单号
      consume: 0, //消耗积分
      loading: false,
      kefuShow: false,
    };
  },
  mounted() {
    // 查积分
    this.queryP();
    this.brand = this.$route.query.brand;
    if (this.brand == "SF") {
      this.brand = "顺丰";
    }
    if (this.brand == "FZ") {
      this.brand = "飞猪";
    }
    if (this.brand == "PS") {
      this.brand = "品胜";
    }
  },
  methods: {
    // 客服电话
    kefu() {
      this.kefuShow = true;
    },
    // 校验验证码
    iphonCode() {
      let codeTest = /^\d{6}/.test(this.code);
      if (!this.code) {
        this.$toast("验证码不能为空");
        return;
      } else if (!codeTest) {
        this.$toast("请输入6位验证码");
        return;
      }
      return true;
    },
    // 获取验证码
    getCode() {
      this.isSendCode = true;
      let timer = setInterval(() => {
        this.codeNum = this.codeNum - 1;
        if (this.codeNum <= 0) {
          this.isSendCode = false;
          this.codeNum = 60;
          clearInterval(timer);
        }
      }, 1000);
      payCode(this.orderid)
        .then((res) => {
          if (res.data.resultCode == 200) {
            this.$toast.success("验证码获取成功");
          } else {
            this.$toast.fail(res.message);
          }
        })
        .catch((err) => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 查积分
    queryP() {
      queryPoints()
        .then((res) => {
          if (res.data.resultCode == 200) {
            this.userInfo = res.data.resultJson;
            //  如果产品是顺丰 brand:SF 飞猪 FZ；品胜 PS
            let sku;
            let val = Number(this.userInfo.userHeCanuseIntegral);
            let quan;
            let xiaohaoJF;
            if (this.brand == "顺丰") {
              if (val < 170) {
                //顺丰低于170不给兑换
                this.$router.push("/insufficient?jifen=" + val);
              } else {
                this.hongbao = (val / 600).toFixed(2);
                if (170 <= val && val < 330) {
                  sku = 11671572;
                  quan = "顺丰同城1元直减券*2张"; //170积分
                  xiaohaoJF = 170;
                } else if (330 <= val && val < 500) {
                  sku = 11671573;
                  quan = "顺丰同城2元直减券*2张"; //330
                  xiaohaoJF = 330;
                } else if (500 <= val && val < 830) {
                  sku = 11671574;
                  quan = "顺丰同城3元直减券*2张"; //500
                  xiaohaoJF = 500;
                } else if (830 <= val && val < 2480) {
                  sku = 11671575;
                  quan = "顺丰同城7折券*1张(最高抵扣10元)"; //830
                  xiaohaoJF = 830;
                } else if (2480 <= val && val < 4950) {
                  sku = 11671576;
                  quan =
                    "顺丰同城30元券包(新用户5折10元*1、8折10元*2，老用户8折10元*3)"; //2480
                  xiaohaoJF = 2480;
                } else if (val >= 4950) {
                  sku = 11671577;
                  let vals = Math.round(val / 4950);
                  quan = `顺丰同城60元券包 (新用户5折10元*${
                    1 * vals
                  }、8折10元*${5 * vals}，老用户8折10元*${6 * vals})`; //特别高于4950
                  xiaohaoJF = vals * 4950;
                }
                // 查询商品
                this.matchingP(sku);
                this.consume = xiaohaoJF;
                this.userInfo.benefitPackage = quan;
              }
            }
            // 如果产品是飞猪(问一下,小于120积分是不是不给兑换了？)
            // let brand =2
            if (this.brand == "飞猪") {
              if (val < 70) {
                //飞猪低于70不给兑换
                this.$router.push("/insufficient?jifen=" + val);
              } else {
                this.hongbao = (val / 600).toFixed(2);
                if (70 <= val && val < 110) {
                  sku = 11691102;
                  quan =
                    "飞猪旅行1元直减券*1张,用本券可享下单金额*满2元减1元的优惠"; //70积分
                  xiaohaoJF = 70;
                } else if (110 <= val && val < 840) {
                  sku = 11557680;
                  quan = "飞猪20元接送机券"; //110积分
                  xiaohaoJF = 110;
                } else if (840 <= val && val < 990) {
                  sku = 11691103;
                  quan =
                    "飞猪旅行8元直减券*1张,用本券可享下单金额*满9元减8元的优惠"; //840积分
                  xiaohaoJF = 840;
                } else if (990 <= val && val < 1330) {
                  sku = 11691104;
                  quan =
                    "飞猪旅行10元直减券*1张,用本券可享下单金额*满11元减10元的优惠"; //990
                  xiaohaoJF = 990;
                } else if (1330 <= val && val < 1540) {
                  sku = 11557894;
                  quan = "10元酒店券+10元机票券+5元火车票券+20元接送机券"; //1330
                  xiaohaoJF = 1330;
                } else if (1540 <= val && val < 2090) {
                  sku = 11691105;
                  quan =
                    "飞猪旅行15元直减券*1张,用本券可享下单金额*满16元减15元的优惠"; //1540
                  xiaohaoJF = 1540;
                } else if (2090 <= val) {
                  sku = 11691106;
                  let vals = Math.round(val / 2090);
                  quan = `飞猪旅行20元直减券*${
                    1 * vals
                  } 张,用本券可享下单金额*满21元减20元的优惠`; //高于2090
                  xiaohaoJF = vals * 2090;
                }
                this.consume = xiaohaoJF;
                this.matchingP(sku);
                this.userInfo.benefitPackage = quan;
              }
            }
            // 品胜权益包
            if (this.brand == "品胜") {
              if (val < 120) {
                //品胜低于120不给兑换
                this.$router.push("/insufficient?jifen=" + val);
              } else {
                this.hongbao = (val / 600).toFixed(2);
                if (120 <= val && val < 350) {
                  sku = 11635554;
                  quan = "0.5元通用券+0.5元数据线满减券（满3元可使用）"; //120积分
                  xiaohaoJF = 120;
                } else if (350 <= val && val < 460) {
                  sku = 11635555;
                  quan = "1元通用券+2元数据线满减券（满10元可使用）"; //350
                  xiaohaoJF = 350;
                } else if (460 <= val && val < 580) {
                  sku = 11635556;
                  quan = "2元通用券+2元数据线满减券（满10元可使用）"; //460
                  xiaohaoJF = 460;
                } else if (580 <= val && val < 810) {
                  sku = 11538316;
                  quan = "品胜电子提货券 2 元消费抵扣券+通用券 3 元抵用券一张"; //580
                  xiaohaoJF = 580;
                } else if (810 <= val && val < 1150) {
                  sku = 11635557;
                  quan = "3元通用券+4元充电器满减券（满20元可使用）"; //810
                  xiaohaoJF = 810;
                } else if (1150 <= val && val < 1440) {
                  sku = 11635558;
                  quan = "5元通用券+5元充电宝满减券（满40元可使用）"; //1150
                  xiaohaoJF = 1150;
                } else if (1440 <= val && val < 1730) {
                  sku = 11670965;
                  quan = "2 元通用券+10.5 元数据线满减券 (满45 元可使用)"; //1440
                  xiaohaoJF = 1440;
                } else if (1730 <= val && val < 2130) {
                  sku = 11538317;
                  quan =
                    "(品胜电子提货券 10 元消费抵扣券+通用券5 元抵用券一张)"; //1730
                  xiaohaoJF = 1730;
                } else if (2130 <= val && val < 2880) {
                  sku = 11670966;
                  quan = "(3 元通用券+15.5 元数据线满减券 (满80 元可使用))"; //2130
                  xiaohaoJF = 2130;
                } else if (2880 <= val && val < 3630) {
                  sku = 11538318;
                  quan = "品胜电子提货券 20 元消费抵扣券+通用券 5 元抵用券一张"; //2880
                  xiaohaoJF = 2880;
                } else if (3630 <= val && val < 5470) {
                  sku = 11670967;
                  quan = "(5 元通用券+26.5 元数据线满减券 (满120 元可使用))"; //3630
                  xiaohaoJF = 3630;
                } else if (5470 <= val && val < 6330) {
                  sku = 11670968;
                  quan = "(8 元通用券+39.5 元充电器满减券 (满140 元可使用)"; //5470
                  xiaohaoJF = 5470;
                } else if (6330 <= val && val < 8460) {
                  sku = 11538319;
                  quan = "品胜电子提货券 50 元消费抵扣券+通用券5 元抵用券一张"; //6330
                  xiaohaoJF = 6330;
                } else if (8460 <= val && val < 11500) {
                  sku = 11670969;
                  quan = "(10 元通用券+63.5 元充电宝满减券 (满 220 元可使用))"; //8460
                  xiaohaoJF = 8460;
                } else if (11500 <= val && val < 15360) {
                  sku = 11538320;
                  quan =
                    "品胜电子提货券 50 元消费抵扣券+通用券 50 元抵用券一张"; //11500
                  xiaohaoJF = 11500;
                } else if (15360 <= val && val < 31630) {
                  sku = 11670970;
                  quan = "(15 元通用券+118.5 元充电宝满减券 (满400 元可使用))"; //15360
                  xiaohaoJF = 15360;
                } else if (val >= 31630) {
                  sku = 11670971;
                  let vals = Math.round(val / 31630);
                  quan = `(20 元通用券+255 元充电宝满减券*${vals}张 (满 580 元可使用))`; //特别高于31630
                  xiaohaoJF = vals * 31630;
                }
                this.consume = xiaohaoJF;
                this.matchingP(sku);
                this.userInfo.benefitPackage = quan;
              }
            }
          } else {
            this.$toast.fail(res.data.resultMessage);
          }
        })
        .catch((err) => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 匹配商品 11671572
    matchingP(sku) {
      matchingProducts(sku)
        .then((res) => {
          // 查询用户商品列表
          if (res.data.resultCode == 200) {
            this.matchingInfo = res.data.resultJson;
            if (this.brand == "顺丰") {
              this.creatSFOrder(sku);
            }
            if (this.brand == "飞猪") {
              this.creatFZOrder(sku);
            }
          } else {
            this.$toast.fail(res.data.resultMessage);
          }
        })
        .catch((err) => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 创建顺丰订单
    creatSFOrder(sku) {
      shunfengOrder(`goods_sku_id=${sku}&goods_count=1`)
        .then((res) => {
          if (res.data.resultCode == 200) {
            this.orderid = res.data.resultJson.orderId;
          } else {
            this.$toast.fail(res.data.resultMessage);
          }
        })
        .catch((err) => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 创建飞猪订单
    creatFZOrder(sku) {
      feizhuOrder(`goods_sku_id=${sku}&goods_count=1`)
        .then((res) => {
          if (res.data.resultCode == 200) {
            this.orderid = res.data.resultJson.orderId;
          } else {
            this.$toast.fail(res.data.resultMessage);
          }
        })
        .catch((err) => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 立即兑换
    nowSubmit() {
      this.loading = true;
      payJFOrder(
        `orderId=${this.orderid}&verifyCode=${this.code}&ccPwd=${"830917"}`
      )
        .then((res) => {
          if (res.status == 200 && res.data.resultCode == 200) {
            this.loading = false;
            this.$router.push(
              "/success?hongbao=" + this.hongbao + "&brand=" + this.brand
            );
          } else {
            this.$toast.fail(res.data.resultMessage);
            this.loading = false;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.exchange {
  background: url("../assets/bg2.ae68573e.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .Mobile_points {
    width: 100%;
    flex: 0 0 2.5rem;
    position: relative;
    .text {
      position: absolute;
      bottom: 0.3rem;
      left: 0;
      right: 0;
      font-size: 0.4rem;
      color: #873100;
    }
  }
  .Voucher_package {
    margin-top: 1rem;
    width: 100%;
    flex: 0 0 7rem;
    background: url("../assets/sku_bg.f10b7d9e.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    .title {
      color: #d23d53;
      font-size: 0.5rem;
      font-weight: 600;
      display: flex;
      padding-top: 0.4rem;

      .line {
        width: 100px;
        height: 0.05rem;
        background: #d23d53;
        margin: auto;
      }
    }
    .illustrate {
      margin-top: 0.2rem;
      color: #d07e84;
    }
    // .package {
    //   color: #d23d53;
    //   font-size: 0.4rem;
    //   position: absolute;
    //   left: 1rem;
    //   bottom: 2rem;
    //   width: 3rem;
    // }
    // .money {
    //   color: #d23d53;
    //   position: absolute;
    //   right: 1.5rem;
    //   top: 2.7rem;
    //   :nth-child(1) {
    //     font-size: 0.4rem;
    //   }
    //   :nth-child(2) {
    //     font-size: 1rem;
    //   }
    // }
    .jifen {
      position: absolute;
      bottom: 0.5rem;
      font-size: 0.4rem;
      left: 0;
      right: 0;
      color: orange;
    }
  }
  .codeIcon {
    border-radius: 0.4rem;
    margin-top: 0.5rem;
    :first-child {
      display: flex;
      align-items: center;
      img {
        width: 100%;
        // display: block;
      }
    }
  }
  .exchange_btn {
    width: 80%;
    height: 1.5rem;
    margin: auto;
    margin-top: 0.5rem;
    position: relative;
    background-image: url("../assets/form_submit.f2aed870.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .load {
      position: absolute;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.6);
      z-index: 9;
      height: 100%;
      height: 100%;
      line-height: 1.5rem;
    }
    img {
      width: 100%;
      // height: 100%;
    }
  }
  .service {
    margin-top: 1rem;
    font-size: 0.5rem;
    border-bottom: 1px solid #685c5e;
    color: #685c5e;
  }
}
.activity {
  padding: 0.5rem;
  width: 8rem;
  // height: 3rem;
  background: white;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: center;
  .title {
    color: #d23d53;
    font-size: 0.5rem;
    font-weight: 600;
    display: flex;
    .line {
      width: 100px;
      height: 0.05rem;
      background: #d23d53;
      margin: auto;
    }
  }
  .content {
    margin-top: 0.3rem;
    text-align: left;
  }
}
.popup {
  width: 8rem;
  //   height: 7.3rem;
  background: white;
  .header {
    height: 1.7rem;
    width: 100%;
    img {
      width: 100%;
    }
  }

  .tip {
    color: #d6394a;
    margin: 0.5rem;
  }
  .btn {
    border-radius: 20rem;
    background: #d6394a;
    color: white;
    width: 5rem;
    height: 1rem;
    margin-bottom: 0.6rem;
  }
}
.van-field__error-message {
  padding-left: 0.5rem;
}

.contactService {
  width: 1.5rem;
  height: 1.5rem;
  position: fixed;
  right: 0;
  top: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
.kefu {
  font-size: 0.6rem;
  padding: 0.8rem;
  background: white;
}
.packageContent {
  height: 50%;
  display: flex;
  align-items: center;
  padding: 0.7rem;
  position: relative;
  .package {
    width: 50%;
    color: #d23d53;
    font-size: 0.4rem;
  }
  .money {
    width:50%;
    color: #d23d53;
    position: absolute;
    top: 1.1rem;
    right: 0.5rem;
    :nth-child(1) {
      font-size: 0.4rem;
    }
    :nth-child(2) {
      font-size: 0.9rem;
    }
  }
}
</style>